<link rel="import" href="../../bower_components/vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">

<dom-module id="organization-add">
    <template>
        <style include="shared-styles dialogs">
            :host {
            }
            #errormsg {
                padding: 0 24px 24px 24px;
                color: var(--red-color);
            }
            .pad-bot {
                padding-bottom: 24px;
            }
            paper-checkbox {
                --paper-checkbox-checked-ink-color: var(--mist-blue) !important;
                --paper-checkbox-checked-color: var(--mist-blue) !important;
            }
        </style>

        <vaadin-dialog id="organizationAddModal" theme="mist-dialog" with-backdrop>
            <template>
                <h2>Add Organization</h2>
                <div class="paper-dialog-scrollable">
                    <div hidden$="[[success]]">
                        <p>
                            <paper-input id="name" label="Name" error-message="Please enter organization's name" value="{{newOrganization.name}}" on-keydown="_submitOnEnter" autofocus=[[!success]]></paper-input><br/>
                            <div hidden$="[[!currentOrg.super_org]]">
                                <paper-checkbox id="superorg" label="super org" checked="{{newOrganization.super_org::change}}">
                                    Sub-organization. <br/>
                                    <span class="subtitle">
                                        It will inherit [[currentOrg.name]]'s teams.
                                    </span>
                                </paper-checkbox>
                            </div>
                        </p>
                        <div id="errormsg" hidden$="[[!fail]]">[[errorMessage]]</div>
                        <div class="clearfix btn-group">
                            <paper-button class="blue-link" on-tap="_closeDialog"> Cancel </paper-button> 
                            <paper-button class="submit-btn btn-block blue" disabled$="[[!formReady]]" raised on-tap="_submitForm">Add</paper-button>
                        </div>
                    </div>
                    <div hidden$="[[!success]]" style="margin-bottom: 16px">
                        <p class="pad-bot">
                            Organization created successfully. You can switch to the new organization context.
                        </p>
                        <p>
                           <paper-button id="switchOrgBtn" class="submit-btn btn-block blue" on-tap="_switchOrg" dialog-confirm autofocus=[[success]]>Switch</paper-button>
                        </p>
                    </div>
                </div>
            </template>
        </vaadin-dialog>
        <iron-ajax id="organizationAddAjaxRequest" url="/api/v1/org" method="POST" on-response="_handleOrganizationAddAjaxResponse" handle-as="json" on-error="_handleOrganizationAddAjaxError"></iron-ajax>

    </template>

    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'organization-add',

                properties: {
                    newOrganization: {
                        type: Object,
                        value: {
                            name: '',
                            super_org: false
                        },
                    },
                    currentOrg: {
                        type: Object
                    },
                    sendingData: {
                        type: Boolean,
                        value: false
                    },
                    formReady: {
                        type: Boolean,
                        computed: '_computeFormReady(newOrganization.name, sendingData)'
                    },
                    success: {
                        type: Boolean,
                        value: false
                    },
                    newOrgId: {
                        type: String
                    },
                    fail: {
                        type: Boolean,
                        value: false
                    },
                    isSuperOrg: {
                        type: Boolean
                    },
                    errorMessage: {
                        type: String,
                        value: ''
                    }
                },
                _computeFormReady: function(name, sendingData) {
                    var formReady = false;

                    if (name) {
                        formReady = true;
                    }

                    if (sendingData) {
                        formReady = false;
                    }

                    return formReady;
                },
                _computeType: function(type, value) {
                    return type == value;
                },
                _computeDanger: function(danger) {
                    return danger;
                },
                openDialog: function(e) {
                    this.shadowRoot.querySelector('vaadin-dialog').opened = true;
                    this._formReset();
                },
                _closeDialog: function(e) {
                    document.querySelector('vaadin-dialog-overlay').opened = false;
                    this._formReset();
                },
                _submitForm: function() {
                    this.$.organizationAddAjaxRequest.headers["Content-Type"] = 'application/json';
                    this.$.organizationAddAjaxRequest.headers["Csrf-Token"] = CSRF_TOKEN;
                    this.$.organizationAddAjaxRequest.body = {
                        name: this.newOrganization.name,
                        super_org: this.newOrganization.super_org
                    };
                    this.$.organizationAddAjaxRequest.generateRequest();

                    this.set('sendingData', true);
                },
                _submitOnEnter: function (e) {
                    // check if 'enter' was pressed
                    if (e.keyCode === 13) {
                        this._submitForm();
                    }
                },
                _handleOrganizationAddAjaxResponse: function(e) {
                    this.set('sendingData', false);
                    this._formReset();
                    this.set('newOrgId',e.detail.xhr.response.id);
                    this.set('success', true);
                },
                _switchOrg: function(){
                    window.location.href = this.newOrgId ? '/switch_context/' + this.newOrgId : '/switch_context';
                },
                _handleOrganizationAddAjaxError: function(e){
                    this.set("fail", true);
                    this.set('sendingData', false);
                    // TODO: should be e.detail.request.xhr.responseText which is more descriptive
                    // but only if handle-as="xml" which does not return newOrg id
                    var msg = e.detail.error.message;
                    if (msg.indexOf('409')> -1)
                        msg = 'Name must be unique';
                    this.set('errorMessage', msg);
                },
                _formReset: function() {
                    this.set('newOrganization.name', '');
                    this.set('newOrganization.super_org', false);
                    this.set('success', false);
                    this.set('newOrgId','');
                    this.set("fail", false);
                }
            });
        })();
    </script>
</dom-module>